<template>
  <div class="max-w-md w-full h15 fixed bottom-4 px-4" flex="~ items-center">
    <n-button :loading="loading" type="primary" :bordered="false" class="w-full h-full rd-2">
      <span class="font-800 text-5 text-#1A1B1D">Use Spell</span>
    </n-button>
    <n-icon :size="32" color="black" class="right-12"><ChevronRightSharp /></n-icon>
  </div>
</template>

<script setup lang="ts">
import { NButton, NIcon } from 'naive-ui'
import { ChevronRightSharp } from '@vicons/material'
defineProps<{loading:boolean}>()
</script>

<style lang="scss" scoped>
#use-spell-container {
  position: fixed;
  #use-spell {
    background-color: var(--color-primary);
  }
}
</style>
